<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>计算属性</title>
</head>
<body>
<h1></h1>
<div id="app">
    <!-- 需求:
         将用户的输入内容进行反转
         API:
            1.字符串转化为数组 拆串 split('')
            2.将数组倒序		.reverse()
            3.将数组转化为字符串 .join('')

         计算属性功能用法:
            1.插值表达式中应该写简单的算数计算,如果复杂应该封装
            2.如果数据操作相同则应该简化过程.
         总结: 计算属性相对于方法 效率高(从虚拟DOM中直接获取结果)
     -->
    <h3>数据展现:</h3>
    {{reverse()}}<br>  <!-- 方法多次执行-->
    {{reverse()}}<br>
    {{reverse()}}<br>
    {{reverse()}}<br>
    {{reverseCom}}<br> <!-- 计算属性只执行一次-->
    {{reverseCom}}<br>
    {{reverseCom}}<br>
    {{reverseCom}}<br>
    <input type="text" v-model="msg"/>
</div>

<!-- 引入JS文件 -->
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:	"#app",
        data: {
            msg: 'abc'
        },
        methods: {
            reverse(){
                console.log("方法执行!!!!!")
                return this.msg.split('').reverse().join('')
            }
        },
        computed: {
            //key:value  必须添加返回值
            reverseCom(){
                console.log("计算属性!!!!")
                return this.msg.split('').reverse().join('')
            }
        }
    })
</script>
</body>
</html>
